//次按钮
.lee-button.el-button {
    --disabled-background: #f8f8f8; //禁用背景色
    padding: 0 16px;
    font-weight: normal;
    color: var(--AC7);
    border-color: var(--SAC5);
    &:not(.is-circle) {
        min-width: 74px;
    }
    &:focus {
        color: var(--AC7);
        border-color: var(--SAC5);
        background-color: var(---FFF);
    }
    &:hover {
        background: var(--FFF);
        border: 1px solid var(--MC1);
        color: var(--MC1);
    }
    &:active {
        background: var(--SAC4);
        border: 1px solid var(--MC1);
    }
    &.is-disabled {
        background: var(--disabled-background);
        border: 1px solid var(--SAC8);
        color: var(--SAC7);
        &:hover {
            background: var(--disabled-background);
            border: 1px solid var(--SAC8);
            color: var(--SAC7);
        }
    }
    &.is-loading {
        color: var(--AC7);
        border-color: var(--SAC5);
        background: var(---FFF);
        opacity: 0.9;
    }
    &.is-plain.is-disabled {
        background: none;
        &:hover {
            background: none;
        }
    }
    &.el-button--small {
        min-width: 38px;
    }
    &.el-button--large {
        min-width: 96px;
    }
}
//主按钮
.lee-button.el-button.el-button--primary {
    --primary-active-background: #002874; //选中状态背景颜色
    font-weight: normal;
    color: var(--FFF);
    background-color: var(--MC1);
    border-color: var(--MC1);
    &:focus {
        color: var(--FFF);
        background-color: var(--MC1);
        border-color: var(--MC1);
    }
    &.is-plain {
        background: none;
        color: var(--MC1);
        &.is-disabled {
            color: var(--SAC7);
            background: none;
            border-color: var(--SAC7);
        }
        &.is-loading {
            border-color: var(--MC1);
            color: var(--MC1);
            background: none;
        }
    }
    &:hover {
        color: var(--FFF);
        background-color: var(--MC1);
        opacity: 0.8;
        border-color: var(--MC1);
    }
    &:active {
        background: var(--primary-active-background);
        border-color: var(--primary-active-background);
    }
    &.is-disabled:not(.is-plain) {
        background: var(--SAC7);
        border-color: var(--SAC7);
        color: #fff;
        &:hover {
            background: var(--SAC7);
            border-color: var(--SAC7);
            opacity: 1;
            color: #fff;
        }
    }
    &.is-loading:not(.is-plain) {
        color: var(--FFF);
        background-color: var(--MC1);
        border-color: var(--MC1);
        opacity: 0.9;
        &.is-plain {
            background: none;
            color: var(--AC4);
        }
    }
}
//警告按钮
.lee-button.el-button.el-button--warning {
    --warning-active-background: #e88200; //选中状态背景颜色
    --warning-disabled-background: #ffd299; //禁用背景色
    font-weight: normal;
    color: var(--FFF);
    background-color: var(--AC4);
    border-color: var(--AC4);
    &:focus {
        color: var(--FFF);
        background-color: var(--AC4);
        border-color: var(--AC4);
    }
    &.is-plain {
        background: none;
        color: var(--AC4);
        &.is-disabled {
            opacity: 0.6;
            color: var(--AC4);
            background: none;
            border-color: var(--AC4);
        }
        &.is-loading {
            border-color: var(--AC4);
            color: var(--MC1);
        }
    }
    &:hover {
        color: var(--FFF);
        background-color: var(--AC4);
        opacity: 0.8;
        border-color: var(--AC4);
    }
    &:active {
        background: var(--warning-active-background);
        border-color: var(--warning-active-background);
        color: var(--FFF);
    }
    &.is-disabled:not(.is-plain) {
        background: var(--warning-disabled-background);
        border-color: var(--warning-disabled-background);
        color: #fff;
        &:hover {
            background: var(--warning-disabled-background);
            border-color: var(--warning-disabled-background);
            opacity: 1;
            color: #fff;
        }
    }
    &.is-loading {
        color: var(--FFF);
        background-color: var(--AC4);
        border-color: var(--AC4);
        opacity: 0.9;
        &.is-plain {
            background: none;
            color: var(--AC4);
        }
    }
}
//错误按钮
.lee-button.el-button.el-button--danger {
    --danger-active-background: #e32121; //选中状态背景颜色
    --danger-disabled-background: #ffbaba; //禁用背景色
    font-weight: normal;
    color: var(--FFF);
    background-color: var(--AC5);
    border-color: var(--AC5);
    &:focus {
        color: var(--FFF);
        background-color: var(--AC5);
        border-color: var(--AC5);
    }
    &.is-plain {
        background: none;
        color: var(--AC5);
        &.is-disabled {
            opacity: 0.6;
            color: var(--AC5);
            background: none;
            border-color: var(--AC5);
        }
        &.is-loading {
            border-color: var(--AC5);
            color: var(--MC1);
        }
    }
    &:hover {
        color: var(--FFF);
        background-color: var(--AC5);
        opacity: 0.8;
        border-color: var(--AC5);
    }
    &:active {
        background: var(--danger-active-background);
        border-color: var(--danger-active-background);
        color: var(--FFF);
    }
    &.is-disabled:not(.is-plain) {
        background: var(--danger-disabled-background);
        border-color: var(--danger-disabled-background);
        color: #fff;
        &:hover {
            background: var(--danger-disabled-background);
            border-color: var(--danger-disabled-background);
            opacity: 1;
            color: #fff;
        }
    }
    &.is-loading {
        color: var(--FFF);
        background-color: var(--AC5);
        border-color: var(--AC5);
        opacity: 0.9;
        &.is-plain {
            background: none;
            color: var(--AC5);
        }
    }
}
//成功按钮
.lee-button.el-button.el-button--success {
    --success-active-background: #008258; //选中状态背景颜色
    --success-disabled-background: #9edec9; //禁用背景色
    font-weight: normal;
    color: var(--FFF);
    background-color: var(--AC2);
    border-color: var(--AC2);
    &:focus {
        color: var(--FFF);
        background-color: var(--AC2);
        border-color: var(--AC2);
    }
    &.is-plain {
        background: none;
        color: var(--AC2);
        &.is-disabled {
            opacity: 0.6;
            color: var(--AC2);
            background: none;
            border-color: var(--AC2);
        }
        &.is-loading {
            border-color: var(--AC2);
            color: var(--MC1);
        }
    }
    &:hover {
        color: var(--FFF);
        background-color: var(--AC2);
        opacity: 0.8;
        border-color: var(--AC2);
    }
    &:active {
        background: var(--success-active-background);
        border-color: var(--success-active-background);
        color: var(--FFF);
    }
    &.is-disabled:not(.is-plain) {
        background: var(--success-disabled-background);
        border-color: var(--success-disabled-background);
        color: #fff;
        opacity: 1;
        &:hover {
            background: var(--success-disabled-background);
            border-color: var(--success-disabled-background);
            opacity: 1;
            color: #fff;
        }
    }
    &.is-loading {
        color: var(--FFF);
        background-color: var(--AC2);
        border-color: var(--AC2);
        opacity: 0.9;
        &.is-plain {
            background: none;
            color: var(--AC2);
        }
    }
}
.lee-button.el-button.el-button--text {
    border: none;
    height: 14px;
    padding: 0;
    min-width: 0;
    color: var(--main-color);
    &[link] {
        color: var(--AC1);
    }
    &:hover {
        text-decoration: underline;
        color: var(--AC1);
    }
    &:active {
        background: none;
    }
    &.is-disabled{
        color: var(--SAC7);
        background: none;
        text-decoration: none;
        &:hover{
            border: none;
        }
    }
}
